<template>
  <div class="configuration-of-important-information">
    <zk-searcher v-model="query" :options="searchColumns" />
    <w-block class="body" title="要件信息列表" style="margin-top: 10px">
      <template #list>
        <div class="btn-list">
          <el-button class="btn-list-item" type="primary" @click="showAddModal({colList:[]})">增加</el-button>
          <el-button class="btn-list-item" type="warning" @click="showUpdateModal()">修改</el-button>
          <el-button class="btn-list-item" type="danger" @click="handleDelete">删除</el-button>
        </div>
      </template>
      <zk-table
        :columns="tableColumns"
        :service="service"
        :query="query"
        use-selection
        :actions="actions"
        @onSelectionChange="onSelection"
        @doOtherAction="doActions"
      >
      </zk-table>
    </w-block>
    <w-dialog :visible.sync="visible" height="auto" :title="modalTitle" width="900px">
      <el-form ref="modelForm" :model="model" label-width="160px">
        <el-row>
          <el-col v-for="item of formColumns" :key="item.key" :span="item.span || 11">
            <el-form-item
              :label="item.label"
              :prop="item.key"
              :rules="item.rules || item.required && [{ required: true, message: `请输入${item.label}`, trigger: ['blur'] }]"
            >
              <zk-item-pool
                v-model="model[item.key]"
                :option="{...item, disabled: isReview }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="22" :offset="2">
            <app-editable-table :columns="colColumns" :list="model.colList" :disabled="isReview" />
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="flex-end">
          <el-button type="default" @click="visible=false">取 消</el-button>
          <el-button type="primary" @click="doSubmit">保 存</el-button>
        </div>
      </template>
    </w-dialog>
  </div>
</template>
<script>
  import { TYPE_ENUM } from '@/common/zk-constants'
  import AppEditableTable from '@/components/app-editable-table'
  import { configurationOfImportantInformation as service } from '@/services'
  import SearchTableCRUDMixin from '@/mixins/search-table-crud-mixin'

  const columns = [
    {
      'label': '要件编号',
      'key': 'item_code',
      table: true,
      type: TYPE_ENUM.NUMBER,
      form: true,
      min: 0,
      rules: [
        { required: true, message: `请输入要件编号`, trigger: ['blur'] },
        {
          validator: (rule, value, callback) => {
            callback(value >= 0 ? undefined : new Error('要件编号大于0'))
          },
          trigger: ['blur', 'change']
        },
      ]
    },
    { 'label': '要件名称', 'key': 'item_name', table: true, search: true, form: true, required: true },
    {
      'label': '要件关键等级',
      'key': 'is_mvp',
      type: TYPE_ENUM.SELECT,
      storeKey: 'itemImportantDocument',
      table: true,
      search: true,
      form: true,
      required: true
    },
    {
      'label': '上传方式',
      'key': 'upload_type',
      type: TYPE_ENUM.SELECT,
      storeKey: 'uploadType',
      table: true,
      search: true,
      form: true,
      required: true
    },

    // {'label': '附件数量', 'key': 'accessories_total', form: true, type: TYPE_ENUM.NUMBER, required: true,},
    // {'label': '完成人', 'key': 'completed_person', form: true, required: true},
    // {'label': '完成部门', 'key': 'completion_department', type: TYPE_ENUM.SELECT, storeKey: 'orgList', form: true, required: true},
    // {'label': '完成时间', 'key': 'completion_time', form: true, type: TYPE_ENUM.DATE, required: true},

    { 'label': '字段数量', 'key': 'col_num', table: true },
    { 'label': '创建时间', 'key': 'create_date', table: true },
  ]

  const colColumns = [
    { 'label': '字段名称', 'key': 'col_name', required: true, },
    { 'label': '字段类型', 'key': 'col_type', type: TYPE_ENUM.SELECT, required: true, storeKey: 'colType', },
  ]
  const actions = [
    { classname: 'primary', text: '详情', type: 'review' }
  ]
  export default {
    mixins: [SearchTableCRUDMixin],
    components: { AppEditableTable },
    data() {
      return {
        columns,
        colColumns,
        service,
        actions,
        isReview: false,
      }
    },
    computed: {
      modalTitle() {
        return this.isAddModal ? '添加' : '编辑'
      },
    },
    methods: {
      doActions({ row }) {
        this.handleUpdateByRow(row, true)
      },
      doSubmit() {
        if (this.model.colList.length >= 0) {
          if (this.model.colList.every(row => colColumns.filter(col => col.required).every(col => !!row[col.key] || row[col.key] === 0))) {
            this.submit()
          } else {
            this.$message.warning('请填写完整的字段信息')
          }
        }
      },
      showAddModal(model = {}) {
        this.isReview = false
        this.handleAdd(model)
      },
      showUpdateModal(model = {}) {
        this.isReview = false
        this.handleUpdate(model)
      },
      handleUpdateByRow(row, isReview = false) {
        console.log(isReview)
        this.isReview = isReview
        this.isAddModal = false
        if (row && row.id) {
          this.model = { ...row }
          this.visible = true
        }
      },
    }
  }
</script>
<style scoped lang="scss">
</style>


